<!-- eslint-disable vue/multi-word-component-names -->
<!-- @Author ： NWJ
        Version ： 1.0 -->


<style scoped>
  body, html {
  margin: 0;
  padding: 0;
  overflow-x: hidden; /* 防止出现滚动条 */
  height: 100%; /* 确保body和html占据整个视口高度 */
  font-family: 'Arial', sans-serif;
}

.box {
  position: absolute;
  width: 100vw;
  height: 100vh;
  border-radius: 40px;
  top: 0;
  left: 0;
}

#fontbox {
  background-color: #FFF;
  z-index: 12; /* 确保前面的盒子在后面的盒子之上 */
  transition: transform 1s ease-out; /* 前面的盒子的过渡时间为1秒 */
}

#backbox {
  background: #425aef url(https://img.meuicat.com/blog/loading_block.3c7dab8c.svg) repeat;
  background-size: 30%;
  z-index: 11; /* 后面的盒子在前面的盒子之下 */
  transition: transform 1.4s ease-out; /* 后面的盒子的过渡时间为1.2秒 */
}

.glitch {
  position: absolute;
  bottom: 30px;
  left: 60px;
  font-size: 48px;
  font-weight: bold;
  color: #425aef;
  animation: glitch 2s infinite;
}

.glitch::before,
.glitch::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.glitch::before {
  left: 2px;
  text-shadow: -2px 0 #ff00ff;
  animation: glitch-before 2s infinite;
}

.glitch::after {
  left: -2px;
  text-shadow: 2px 0 #00ffff;
  animation: glitch-after 2s infinite;
}

@keyframes glitch {
  0% {
    transform: translate(0);
  }
  20% {
    transform: translate(-2px, 2px);
  }
  40% {
    transform: translate(-2px, -2px);
  }
  60% {
    transform: translate(2px, 2px);
  }
  80% {
    transform: translate(2px, -2px);
  }
  100% {
    transform: translate(0);
  }
}

@keyframes glitch-before {
  0% {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  }
  25% {
    clip-path: polygon(0 20%, 100% 20%, 100% 100%, 0 100%);
  }
  50% {
    clip-path: polygon(0 40%, 100% 40%, 100% 100%, 0 100%);
  }
  75% {
    clip-path: polygon(0 60%, 100% 60%, 100% 100%, 0 100%);
  }
  100% {
    clip-path: polygon(0 80%, 100% 80%, 100% 100%, 0 100%);
  }
}

@keyframes glitch-after {
  0% {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  }
  25% {
    clip-path: polygon(0 30%, 100% 30%, 100% 100%, 0 100%);
  }
  50% {
    clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0 100%);
  }
  75% {
    clip-path: polygon(0 70%, 100% 70%, 100% 100%, 0 100%);
  }
  100% {
    clip-path: polygon(0 90%, 100% 90%, 100% 100%, 0 100%);
  }
}

.logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.logo path:nth-child(1) {
  stroke-dasharray: 40px;
  stroke-dashoffset: 80px;
  animation: line-anm 1.5s linear infinite;
}

.logo path:nth-child(2) {
  stroke-dasharray: 40px;
  stroke-dashoffset: 80px;
  animation: line-anm 1.5s linear infinite;
}

@keyframes line-anm {
  to {
    stroke-dashoffset: 0;
  }
}

.sk-cube-grid {
  position: absolute;
  left: 10px;
  bottom: 36px;
  width: 40px;
  height: 40px;
  margin: auto;
  /*
   * Spinner positions
   * 1 2 3
   * 4 5 6
   * 7 8 9
   */
}

.sk-cube-grid .sk-cube {
  width: 33%;
  height: 33%;
  background-color: #425aef;
  float: left;
  -webkit-animation: sk-cube-grid-scale-delay 1.3s infinite ease-in-out;
  animation: sk-cube-grid-scale-delay 1.3s infinite ease-in-out;
}

.sk-cube-grid .sk-cube-1 {
  -webkit-animation-delay: 0.2s;
  animation-delay: 0.2s;
}

.sk-cube-grid .sk-cube-2 {
  -webkit-animation-delay: 0.3s;
  animation-delay: 0.3s;
}

.sk-cube-grid .sk-cube-3 {
  -webkit-animation-delay: 0.4s;
  animation-delay: 0.4s;
}

.sk-cube-grid .sk-cube-4 {
  -webkit-animation-delay: 0.1s;
  animation-delay: 0.1s;
}

.sk-cube-grid .sk-cube-5 {
  -webkit-animation-delay: 0.2s;
  animation-delay: 0.2s;
}

.sk-cube-grid .sk-cube-6 {
  -webkit-animation-delay: 0.3s;
  animation-delay: 0.3s;
}

.sk-cube-grid .sk-cube-7 {
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
}

.sk-cube-grid .sk-cube-8 {
  -webkit-animation-delay: 0.1s;
  animation-delay: 0.1s;
}

.sk-cube-grid .sk-cube-9 {
  -webkit-animation-delay: 0.2s;
  animation-delay: 0.2s;
}

@-webkit-keyframes sk-cube-grid-scale-delay {
  0%, 70%, 100% {
    -webkit-transform: scale3D(1, 1, 1);
    transform: scale3D(1, 1, 1);
  }
  35% {
    -webkit-transform: scale3D(0, 0, 1);
    transform: scale3D(0, 0, 1);
  }
}

@keyframes sk-cube-grid-scale-delay {
  0%, 70%, 100% {
    -webkit-transform: scale3D(1, 1, 1);
    transform: scale3D(1, 1, 1);
  }
  35% {
    -webkit-transform: scale3D(0, 0, 1);
    transform: scale3D(0, 0, 1);
  }
}
</style>

<template>
  <div id="loading-animation" class="loading-container" style="display: block;">
    <div id="fontbox" class="box">
      <svg id="logo" class="logo" width="600" height="800" xmlns="http://www.w3.org/2000/svg"
           viewBox="0 0 94.512 55.272" fill="none">
      <!-- 蓝色线条的路径 -->
      <path
        d="M93.443 51.578C91.1597 52.67 88.7047 53.4763 86.078 53.997C83.47 54.5137 80.4533 54.772 77.028 54.772C71.354 54.772 66.3357 53.706 61.973 51.574C57.5797 49.4273 54.1207 46.3667 51.596 42.392C49.068 38.4127 47.804 33.758 47.804 28.428C47.804 23.0633 49.0377 18.275 51.505 14.063C53.9737 9.849 57.3877 6.53367 61.747 4.117C66.0983 1.70567 71.072 0.5 76.668 0.5C79.372 0.5 82.1117 0.77 84.887 1.31C87.6637 1.85067 90.0187 2.51767 91.952 3.311L92.572 3.565L92.572 14.268L91.253 13.824C86.5083 12.2267 82.1027 11.428 78.036 11.428C73.1133 11.428 69.1397 12.8273 66.115 15.626C63.113 18.404 61.612 22.6713 61.612 28.428C61.612 31.5027 62.342 34.2193 63.802 36.578C65.2533 38.922 67.1923 40.6283 69.619 41.697C72.1063 42.7923 74.792 43.34 77.676 43.34C79.274 43.34 80.7167 43.2943 82.004 43.203L82.004 34.036L76.316 34.036L76.316 23.036L94.012 23.036L94.012 51.306L93.443 51.578Z"
        stroke="#425aef" stroke-width="1" fill="none"> <!-- 蓝色线条 -->
      </path>
      <!-- 黑色线条的路径 -->
      <path
        d="M1.58 13.084L26.373 13.084L0.5 42.741L0.5 53.836L44.764 53.836L44.764 42.116L18.789 42.116L44.116 12.453L44.116 1.436L1.58 1.436L1.58 13.084ZM77.676 44.34C79.692 44.34 81.468 44.268 83.004 44.124L83.004 33.036L77.316 33.036L77.316 24.036L93.012 24.036L93.012 50.676C90.804 51.732 88.428 52.512 85.884 53.016C83.34 53.52 80.388 53.772 77.028 53.772C71.508 53.772 66.636 52.74 62.412 50.676C58.188 48.612 54.864 45.672 52.44 41.856C50.016 38.04 48.804 33.564 48.804 28.428C48.804 23.244 49.992 18.624 52.368 14.568C54.744 10.512 58.032 7.32 62.232 4.992C66.432 2.664 71.244 1.5 76.668 1.5C79.308 1.5 81.984 1.764 84.696 2.292C87.408 2.82 89.7 3.468 91.572 4.236L91.572 12.876C91.2373 12.7633 90.904 12.6543 90.572 12.549C86.102 11.135 81.9233 10.428 78.036 10.428C72.852 10.428 68.652 11.916 65.436 14.892C62.22 17.868 60.612 22.38 60.612 28.428C60.612 31.692 61.392 34.584 62.952 37.104C64.512 39.624 66.6 41.46 69.216 42.612C71.832 43.764 74.652 44.34 77.676 44.34ZM2.58 12.084L28.572 12.084L27.7 13.084L1.5 43.116L1.5 52.836L43.764 52.836L43.764 43.116L16.62 43.116L17.474 42.116L43.116 12.084L43.116 2.436L2.58 2.436L2.58 12.084Z"
        stroke="#425aef" stroke-width="1" fill="none"> <!-- 黑色线条 -->
      </path>
      </svg>
      <section>
        <div class='sk-cube-grid'>
          <div v-for="i in 9" :key="i" class='sk-cube' :class="'sk-cube-' + i"></div>
        </div>
      </section>
      <div class="glitch" data-text="Loading...">
        Loading...
      </div>
    </div>
    <div id="backbox" class="box"></div>
  </div>
</template>

<script>
export default {
  mounted()
  {
    this.initAnimations()
  },
  methods: {
    initAnimations()
    {
      const fontbox = document.getElementById('fontbox')
      const backbox = document.getElementById('backbox')

      setTimeout(() =>
      {
        fontbox.style.transform = 'translateX(100%)'
      }, 10)

      setTimeout(() =>
      {
        backbox.style.transform = 'translateX(100%)'
      }, 10)
    }
  }
}
</script>
